<template>
  <div v-if="dialogState.isOpen" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
    <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
      <div class="p-6">
        <h2 class="text-lg font-semibold mb-4">{{ dialogState.title }}</h2>
        
        <div v-if="resolvedComponent">
          <component 
            :is="resolvedComponent" 
            v-bind="dialogState.componentProps || {}"
            @select="handleSelect"
            @close="handleClose"
          />
        </div>
        <div v-else-if="typeof dialogState.component === 'string'">
          <p class="text-red-500">Component "{{ dialogState.component }}" not found</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useDynamicDialog } from '~/composables/use-dynamic-dialog';

// Import the components that might be used dynamically
import SelectBackupDialog from './SelectBackupDialog.vue';

const { dialogState, closeDialog } = useDynamicDialog();

// Map component names to actual components
const componentMap = {
  'SelectBackupDialog': SelectBackupDialog,
  // Add other dynamic components here as needed
};

// Resolve component by name or return the component directly
const resolvedComponent = computed(() => {
  if (typeof dialogState.component === 'string') {
    return componentMap[dialogState.component] || null;
  }
  return dialogState.component;
});

function handleSelect(result: any) {
  closeDialog(result);
}

function handleClose() {
  closeDialog(null);
}
</script>

<style scoped>
@media (max-width: 640px) {
  .max-w-md {
    max-width: calc(100% - 2rem);
  }
}
</style>